<template>
    <div class="map" ref="refForMap">
        <!-- 这里是地图组件 -->
    </div>
</template>

<script lang="ts" setup name="Map">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import ChinaJSON from '@/views/screen/components/map/chinesemap.json' // 引入地图的json数据文件
let refForMap = ref<HTMLDivElement>() // 获取地图展示区的所在DOM元素
echarts.registerMap('china', ChinaJSON as any) // 使用registerMap方法注册地图（第一个参数是地图的名字，第二个参数是地图的json数据）
onMounted(() => {
    let instanceOfEcharts = echarts.init(refForMap.value as HTMLDivElement) // 初始化echarts实例（传入要渲染的DOM元素）
    instanceOfEcharts.setOption({
        // 地图组件↓
        geo: [{
            map: 'china', // 指定显示哪一个国家的地图（要和registerMap方法中第一个参数一致）
            roam: true, // 设置是否开启鼠标缩放和平移漫游（即拖动地图）。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为这两项都开启
            // 设置地图的位置（相对于容器盒子）（单位：像素）↓
            left: 50,
            right: 50,
            top: 100,
            bottom: 0,
            label: {
                show: true, // 是否显示各省的名称标签（默认不显示）
                color: 'white', // 设置文字颜色为白色
                fontSize: 14, // 设置文字大小

            },
            // 设置每个省份所在图形的样式↓
            itemStyle: {
                // color:'red', // 省份所在图形的颜色
                color: {
                    type: 'linear', // 渐变颜色（线性）
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                opacity: 0.8, // 图形透明度
            }, // 高亮状态下省份所在图形的样式↓
            emphasis: {
                itemStyle: {
                    color: 'yellow' // 高亮时省份所在图形的颜色
                },
                label: {
                    fontSize: 16, // 高亮时文字大小
                }
            }
        }],
        grid: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
        },
        series: [{
            type: 'lines', // 线条类型的图表（用来绘制航线）
            data:[
                {
                    coords: [
                        [116.405285,39.904989],  // 起点
                        [119.306239,26.075302],   // 终点
                    ],
                    // 对航线进行的统一的样式设置↓
                    lineStyle: {
                        color:'white', // 线条颜色
                        width: 5, // 线条宽度

                    },
                },
                {
                    coords: [
                        [116.405285,39.904989],  // 起点
                        [112.982279,28.19409],   // 终点
                    ],
                    // 对航线进行的统一的样式设置↓
                    lineStyle: {
                        color:'white', // 线条颜色
                        width: 5, // 线条宽度

                    },
                },
            ],
            effect: {
                show:true, // 显示动画特效
                symbol:'arrow', // 特效类型为箭头（支持设置svg图标）
                color:'red', // 特效颜色
                symbolSize:10, // 特效大小
            }
        }],
    })
})
</script>

<style scoped></style>